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Listes des balises HTML 


Les balises de document (structure HTML) 


< IDOCTYPE> Indique au navigateur, qu'il s’agit d'une page de type HTML 
<html> C'est la balise qui va englober tout le HTML de la page. 
<head> Cette balise va contenir des informations sur la page. On peut 


y retrouver Les feuilles de styles (CSS), des informations pour 
le référencement, pour la navigation mobile, .... Toutes ces 
informations ne sont pas affichées visuellement dans le 
navigateur. 


<body> La balise body va contenir tout Le corps de la page, tous les 
éléments visuels de la page HTML. IL ne peut y avoir qu’une 
seule balise body par page HTML 


Les balises d’entête 


<link> (Balise orpheline) | Permet d'inclure une ressource externe. Généralement, elle 
est utilisée pour inclure les feuilles de style (CSS). 


<meta> (Balise Balise qui permet de fournir des informations au navigateur au 
orpheline) sujet de la page en question. Les balises méta peuvent 
contenir des données pour l'encodage de la page, des 
données concernant le référencement de la page, etc … 


<script> Permet d'inclure un script dans la page. Généralement utilisé 


pour ajouter du JavaScript. Grâce à l'attribut « src », il est 
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possible d'inclure un fichier externe. Sinon, le script peut être 
écrit directement entre la balise ouvrante et fermante. 


<style> 


Pour rajouter du style (CSS) à la page. 


<title> 


Indique le titre de la page. C'est Le titre que l’on retrouve dans 
l'onglet du navigateur mais aussi comme titre dans les 
résultats des moteurs de recherche. 


Balise de sectionnement (nav, aside, footer, header, main) 


<header> Section d’'entête. Généralement, ce sont les bandes qui se 
trouvent tout en haut des pages web. 

<nav> Ces balises sont utilisées pour créer des menus de navigation. 
On retrouve souvent des listes à puce (ul) avec des liens à 
l'intérieur de ces balises de navigation. 

<section> Définit Les sections principales de La page 

<article> Contient du contenu autonome : un message, un article de 
journal, un commentaire, … 

<aside> Permet de faire un élément « à part », un élément qui n'as pas 
forcément de rapport avec Le contenu principal 

<footer> C'est le pied de page. On y retrouve généralement des 


informations complémentaires sur Le site : mentions légales, 
CGV, contact, … 


Balises génériques 


<div> 


La balise div n’a pas de signification particulière, il représente 
un conteneur générique qui permet de structurer un bloc. La 
balise permet ainsi d'attribuer un style à ce bloc à l’aide de 
classes ou d'un id 


<span> 


<span> fonctionne sur le même principe que <div> mais sur 
du contenu textuel. On peut le mettre sur du texte afin de lui 
ajouter un style. Ex : <p>Ceci est <span>un 
paragraphe</span></p>. On peut ainsi donner un style 
particulier uniquement à « un paragraphe ». 


Balises de structuration de texte 


À connaitre 


<p> 


La balise <p> est l’une des balises les plus essentielles et les 
plus utilisées. Elle permet de créer des paragraphes. 


<hr> (h1, h2, h3, h4, h5, 
h6) 


Permet de créer des titres de différent niveau. Le titre h1 est le 
titre de plus haut niveau (le plus gros) et h6, de plus bas 
niveau (le plus petit). 
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Pour un bon référencement, il est conseillé de ne mettre 
qu'une balise h1 par page et de respecter une bonne structure 
de document (voir ci-dessous) 


<img> (balise orpheline) 


Permet d'intégrer une image. Il faut ajouter l'attribut « src » 
pour lui indiquer la source de l'image (interne ou externe). 

« width » et « height » peuvent aussi être ajouté pour gérer la 
taille de l’image 


<a> 


La balise <a> permet de faire des liens hypertexte. Les liens 
sont aussi des éléments essentiels qui jouent sur Le 
référencement de votre page. Ils permettent de faire naviguer 
l'utilisateur sur votre site, ou l'envoyer sur des pages externes. 
Pour indiquer vers quelle page, on souhaite envoyer 
l'utilisateur, il faut ajouter l'attribut « href » 


<br/> (balise orpheline) 


Fait un retour à la ligne 


<strong> Mets en valeur le texte. Par défaut, il met en gras Le texte. 
Les autres 

<abbr> Abréviation 

<blockquote> Citation longue 

<cite> Titre d’une œuvre, film, chanson, … 

<q> Citation (courte) qui ne nécessite pas de saut de page. Pour 
les plus longue, utiliser blockquote 

<sup> Exposant (pour les chiffres) 

<sub> Indice 

<em> Mise en valeur normale (emphase) 

<mark> Mise en valeur visuelle. C'est un texte marqué, un texte qui 
veut être marqué ou souligné 

<figure> Figure (schéma, figure) 


<figcaption> 


Légende de la figure 


<hr/> Ligne de séparation horizontale 

<ins> Bout de texte ajouter dans un document 

<kbd> Représente du texte saisie par un utilisateur à partir d’un 
clavier ou d’une saisie vocale 

<pre> Affiche du texte formaté (du code par exemple) 

<progress> Barre de progression qui indique l’état de complétion d’une 
tâche 

<time> Représente une période donnée 

<small> Un texte écrit en petit, ou des commentaires 

<adress> Adresse de contact 

<del> Texte supprimé 


https://espritweb.fr 


Intégration de contenu 


À connaitre 
<iframe> L'iframe permet d'intégrer une autre page HTML (interne ou 
externe) de façon imbriqué. 
<audio> Ajouter des pistes audio 
<video> Ajouter des vidéos 
<source> Indique la source des balises <video> ou <audio> 
Les autres 
<object> Intégrer une ressource externe qui sera traitée de façon 
différente selon son type (image, contenu imbriqué....) 
<embed> Intégrer une application externe ou pour du contenu interactif 


Balise de formulaire 


À connaitre 
<button> Utilisé pour créer des boutons. Ces boutons peuvent être 
utilisés pour soumettre un formulaire (en rajoutant l'attribut 
type=“submit“) ou pour d’autres fonctionnalités en dehors des 
formulaires. 
<form> Balise qui va contenir l’ensemble des champs d’un formulaire. 


Les balises form sont généralement accompagnées de 
l'attribut « action » (CURL sur laquelle Le formulaire sera 
envoyé) et « method » (qui définit la méthode http utilisée 
pour ce formulaire) 


<input> (balise orphelin) 


Permet de créer un champ dans lequel l'utilisateur pourra 
rentrer des informations. Pour déterminer le type de données 
attendues dans ce champ, il faudra rajouter l'attribut « type ». 
Ex : <input type="number">, créé un champs dans lequel des 
nombres (uniquement) seront attendus 


<label> Utilisé pour ajouter une légende, un titre rattaché à un champs 
input 

<select> L'équivalent de la balise input mais pour les listes déroulante 
de choix. 

<option> Définit l'ensemble des choix à l’intérieur d’une balise select 

<optgroup> Permet de définir des groupes d’« <option> » 

<textarea> Définit un champs texte qui peut être édité sur plusieur ligne 

Les autres 

<datalist> Contient une liste d'option qui peut être complétée par du 
texte. Permet de faciliter l’auto-complétion 

<fieldset> Permet de regrouper plusieurs éléments d’un formulaire sous 


une même étiquette 
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<legend> Représente la légende de l'élément <fieldset> 

<meter> Un peu comme la balise <progress>, cette balise permet de 
visualiser un état de complétion donné 

<output> Donne le résultat d’un calcul ou d’une valeur renseignée par 


l'utilisateur 


Balises de tableau 


À connaitre 

<table> C'est la balise qui représente Le tableau et qui vas Le contenir. 
Elle va contenir tous les éléments ci-dessous. 

<thead> Représente l’entête du tableau. Généralement on met le nom 
des colonnes à l’intérieur de la balise <head> 

<tbody> Le <body> contient tout le corps du tableau. C'est-à-dire 
toutes les informations du tableau 

<tfoot> Le pied de page a le même rôle que le <thead> mais se situe 
en bas du tableau. On peut par exemple y remettre le nom de 
chaque colonne 

<tr> Représente une ligne du tableau. Dans cette ligne, on vas y 
mettre plusieurs cellules (<th> / <td>) 

<th> Représente une cellule d’'entête. Par défaut Les balises <th> 
sont en gras 

<td> Représente une cellule du tableau 

Les autres 

<colgroup> Représente un groupe composé d’une ou plusieurs colonnes 
de tableau 

<col> Représente une ou plusieurs colonnes dans un groupe de 
colonne représenté par un élément colgroup 

<caption> Pour ajouter un titre à son élément tableau parent 


Balises de liste 


À connaitre 
<ul> C'est Le conteneur d'une liste. La balise <ul> permet de 
déclarer une liste non numérotée et non ordonnée (ul = 
unordered list). Elle vas contenir Les balises <li> 
<li> Représente les éléments de la liste 
<ol> C'est le conteneur d’une liste ordonnée et donc numérotée 


(1,2,3,...). ol = ordered list 
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Les autres 


<dl> Déclare une liste de définition (clé / valeur) 
<dt> Terme à définir (clé) 
<dd> Définition du terme (valeur) 
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